<style scoped>
    .el-table .disabled-row {
        background: oldlace;
    }
</style>
<div class="content" id="team" v-cloak>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple com_title">用户管理</div>
        </el-col>
    </el-row>
    <div class="com_top">
        <el-input v-model="username" class="inp" placeholder="按用户名称查询"></el-input>
        <el-button @click="getList" type="primary">搜索</el-button>
    </div>
    <!-- table -->
    <div class="com_table_block mt20">
        <div class="table_header">
            <div class="l">用户管理</div>
            <div class="r">
                <el-button type="primary" size="medium" class="ml20" icon="el-icon-plus" @click="handleUser(1)">新增用户</el-button>
            </div>
        </div>
        <div class="table_body">
            <el-table :data="datalist" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="user_name" label="用户名称">
                </el-table-column>
                <el-table-column label="可用状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 1" class="success">已启用</div>
                        <div v-if="scope.row.status != 1" class="red">已禁用</div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.create_time | date('-',true)}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button @click="handleUser(2,scope.row)" type="primary" size="small">编辑</el-button>
                            <el-button @click="handleUser(3,scope.row)" type="primary" size="small" plain>修改密码</el-button>
                            <el-button v-if="scope.row.status==1?true:false" @click="hanleUse(scope.row)" type="danger"
                                size="small" plain>禁用</el-button>
                            <el-button v-if="scope.row.status==0?true:false" @click="hanleUse(scope.row)" type="success"
                                size="small">启用</el-button>
                            <el-button @click="hanleDelete(scope.row)" type="danger" size="small">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="common_pages">
            <el-pagination background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
    <!-- model弹出框 -->
    <el-dialog width="500px" title="用户编辑" :visible.sync="dialogTableVisible">
        <div class="com_model_main">
            <div class="com_model_block" v-if="team.type!=3?true:false">
                <div class="left">用户名称<span class="red">*</span></div>
                <el-input class="inp" v-model="team.user_name" placeholder="请输用户名称"></el-input>
            </div>
            <div class="com_model_block" v-if="team.type!=2?true:false">
                <div class="left">用户密码<span class="red">*</span></div>
                <el-input class="inp" v-model="team.pass_word" placeholder="请输用户密码"></el-input>
            </div>
            <div class="com_model_block" v-if="team.type!=3?true:false">
                <div class="left">启用状态</div>
                <el-switch v-model="team.status" active-color="#409EFF"></el-switch>
            </div>
            <div class="btns">
                <el-button type="primary" @click="submitUser"> 提交 </el-button>
            </div>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el: '#team',
        data: function () {
            return {
                username:'',
                datalist: [],
                pageSize: 30,
                totalCount: 0,
                currentPage: 1,
                dialogTableVisible: false,
                type: 1,
                team: {
                    type: 1,
                    _id: '',
                    user_name: '',
                    pass_word: '',
                    status: true,
                },
            }
        },
        filters: {
            date: Filter.date,
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                util.ajax({
                    type: 'get',
                    url: `${config.baseApi}api/v1/user/getUserList`,
                    data:{
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                        username:this.username,
                    },
                    success: data => {
                        this.totalCount = data.data.totalNum;
                        this.datalist = data.data.datalist;
                    }
                })
            },
            submitUser() {
                if (!this.team.user_name && this.team.type === 1) {
                    popup.alert({ title: '请填写用户名称!' });
                    return;
                }
                if (!this.team.pass_word && this.team.type !== 2) {
                    popup.alert({ title: '请填写用户密码!' });
                    return;
                }
                this.team.status = this.team.status ? 1 : 0;
                util.ajax({
                    url: `${config.baseApi}api/v1/user/handle`,
                    data: this.team,
                    success: data => {
                        this.dialogTableVisible = false;
                        this.getList();
                        popup.miss({ title: '操作成功!' });
                    }
                })
            },
            handleUser(type, item) {
                if (item) item = JSON.parse(JSON.stringify(item));
                if(type === 1){
                    this.team = {
                        type: 1,
                        _id: '',
                        user_name: '',
                        pass_word: '',
                        status: true,
                    }
                } else if(type === 2){
                    this.team = {
                        _id: item._id,
                        user_name: item.user_name,
                        status: item.status == 1 ? true : false,
                    };
                } else if (type === 3) {
                    this.team = {
                        _id: item._id,
                        pass_word: '',
                        status: item.status == 1 ? true : false,
                    };
                }
                this.team.type = type;
                this.dialogTableVisible = true;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList();
            },
            hanleUse(item) {
                let str = item.status == 1 ? '禁用' : '启用';
                popup.confirm({
                    title: `确定${str}${item.user_name}用户吗？`, yes: () => {
                        util.ajax({
                            url: `${config.baseApi}api/v1/user/setStatus`,
                            data: {
                                _id: item._id,
                                usertoken:item.usertoken || '',
                                status: item.status == 1 ? 0 : 1,
                            },
                            success: data => {
                                item.status = item.status == 1 ? 0 : 1,
                                    popup.miss({ title: '操作成功!' });
                            }
                        })
                    }
                })
            },
            hanleDelete(item) {
                popup.confirm({
                    title: `确定删除${item.user_name}用户吗？`, yes: () => {
                        util.ajax({
                            url: `${config.baseApi}api/v1/user/delete`,
                            data: {
                                id: item._id,
                                usertoken: item.usertoken || '',
                            },
                            success: data => {
                                this.getList();
                                popup.miss({ title: '操作成功!' });
                            }
                        })
                    }
                })
            },
            tableRowClassName({ row, rowIndex }) {
                if (row.status != 1) {
                    return 'disabled-row';
                }
                return '';
            },
        }
    })
</script>